<template>
  <div class="wrapper">
		<div class="header">加群</div>
		<div class="content">
			<div class="search">
				<div class="text">
					<input type="text" id="group_id" v-model="searchId" placeholder="搜索群号">
				</div>
				<span class="search_btn" ref="sendBtn" id="search_btn"><i class="iconfont icon-search "></i></span>
			</div>
			<div class="list">
				<!-- <div class="list_wrapper">
					<div class="list_item">
						<div class="list_item_left">
							<img src="img/group.png" alt="">
							<span class="item_title">明星八卦群</span>
						</div>
						<div class="add_group">
							<i class="iconfont icon-jiahao"></i>
							<span>申请加群</span>
						</div>
					</div>
				</div> -->
				<div class="list_wrapper" v-if="groupData.GId">
					<div class="list_item">
						<div class="list_item_left">
							<img :src="groupData.FaceUrl" alt="">
							<span class="item_title">{{groupData.Name}}</span>
						</div>
						<div class="add_group" @click="isJoinGroup(groupData.GId)">
							<i class="iconfont icon-jiahao"></i>
							<span>申请加群</span>
						</div>
					</div>
				</div> 
			</div>
		</div>
		<div class="footer">
			<div class="footer_item">
				<i class="iconfont icon-duanxinqunfa"></i>
				<div class="controlo"><span>8</span></div>
			</div>
			<div class="footer_item">
				<i class="iconfont icon-kehuqunzu"></i>
				<div class="controlo"><span>100</span></div>
			</div>
			<div class="footer_item">
				<i class="active iconfont icon-user"></i>
				<div class="controlo"><span>99</span></div>
			</div>
		</div>
	</div>
</template>
<script>
import Client from '../../config/common'
export default {
  data () {
    return {
      loginInfo: {},
      searchId: '', // 查询的群组ID
      groupData: {}, // 查询的数据详情
      currentGroupType: '', // 申请加群的群类型
      applyGroupId: '' // 申请加群的群ID
    }
  },
  created () {

    // 登录初始化
    this.initLogin();
    
  },
  methods: {
    
    // 登录初始化
    initLogin(){
      Client.login(this.getLoginInfo);
    },

    // 获得登录成功信息
    getLoginInfo(loginInfo){
      // 将 登录信息保存在 vue的data里
      this.loginInfo = loginInfo;
      Client.log("登录成功的信息-start");
      Client.log(this.loginInfo);
      Client.log("登录成功的信息-end");
      let That = this;

      //点击搜索群
      $(this.$refs.sendBtn).on("click", function(){
        That.getGroupPublicInfo();
      });

      
      
      
    },

    // 点击申请加入群
    isJoinGroup(group_id) {
      if(this.currentGroupType != '' && this.currentGroupType == 'ChatRoom'){
        // 聊天室直接加群，直接通过
        Client.log(this.currentGroupType);
        this.applyJoinGroup();

      }else {
        // 需要回答问题申请加群
        let currentGroupId = group_id;
        this.$router.push({path: "/addGroupQuestion", query:{currentGroupId}});
        Client.log(this.currentGroupType);
      }

    },

    applyJoinGroup() {
        let That = this;
        // if (webim.Tool.getStrBytes($("#ajg_apply_msg").val()) > 300) {
        //     alert('您输入的附言超出限制(最长100个汉字)');
        //     return;
        // }
        var options = {
            // 'GroupId': $("#ajg_group_id").val(),
            // 'ApplyMsg': $("#ajg_apply_msg").val(),
            'GroupId':this.applyGroupId,
            'UserDefinedField': ''
        };
        webim.applyJoinGroup(
            options,
            function(resp) {
              console.log("聊天室直接加群-加入成功-start")
              console.log(resp)
              console.log("聊天室直接加群-加入成功-start")
                // $('#apply_join_group_dialog').modal('hide');
                var joinedStatus = resp.JoinedStatus; //JoinedSuccess--成功加入，WaitAdminApproval--等待管理员审核
                if (joinedStatus == "JoinedSuccess") {
                    //刷新我的群组列表
                    //getJoinedGroupListHigh(getGroupsCallbackOK);
                    alert('成功加入该群');
                    That.$router.push({path: "/groupList"});
                } else {
                    alert('申请成功，请等待群主审核');
                }
            },
            function(err) {
                alert(err.ErrorInfo);
            }
        );
    },

    //申请加群
    // applyJoinGroup() {
    //     if (webim.Tool.getStrBytes($("#ajg_apply_msg").val()) > 300) {
    //         alert('您输入的附言超出限制(最长100个汉字)');
    //         return;
    //     }
    //     var options = {
    //         'GroupId': $("#ajg_group_id").val(),
    //         'ApplyMsg': $("#ajg_apply_msg").val(),
    //         'UserDefinedField': ''
    //     };
    //     webim.applyJoinGroup(
    //         options,
    //         function(resp) {
    //             $('#apply_join_group_dialog').modal('hide');
    //             var joinedStatus = resp.JoinedStatus; //JoinedSuccess--成功加入，WaitAdminApproval--等待管理员审核
    //             if (joinedStatus == "JoinedSuccess") {
    //                 //刷新我的群组列表
    //                 //getJoinedGroupListHigh(getGroupsCallbackOK);
    //                 alert('成功加入该群');
    //             } else {
    //                 alert('申请成功，请等待群主审核');
    //             }
    //         },
    //         function(err) {
    //             alert(err.ErrorInfo);
    //         }
    //     );
    // },

    // 读取群组公开资料-高级接口（可用于搜索群，按ID）
    getGroupPublicInfo() {
      let That = this;
        if (this.searchId.length == 0) {
            alert('请输入群组ID');
            return;
        }
        if (webim.Tool.trimStr(this.searchId).length == 0) {
            alert('您输入的群组ID全是空格,请重新输入');
            return;
        }
        var options = {
            'GroupIdList': [
                this.searchId
            ],
            'GroupBasePublicInfoFilter': [
                'Type',
                'Name',
                'Introduction',
                'Notification',
                'FaceUrl',
                'CreateTime',
                'Owner_Account',
                'LastInfoTime',
                'LastMsgTime',
                'NextMsgSeq',
                'MemberNum',
                'MaxMemberNum',
                'ApplyJoinOption'
            ]
        };
        webim.getGroupPublicInfo(
            options,
            function(resp) {
                let data = [];
                if (resp.GroupInfo && resp.GroupInfo.length > 0) {
                    for (let i in resp.GroupInfo) {
                        if (resp.GroupInfo[i].ErrorCode > 0) {
                            alert(resp.GroupInfo[i].ErrorInfo);
                            return;
                        }
                        let group_id = resp.GroupInfo[i].GroupId;
                        let name = webim.Tool.formatText2Html(resp.GroupInfo[i].Name);
                        let type_zh = webim.Tool.groupTypeEn2Ch(resp.GroupInfo[i].Type);
                        let FaceUrl = resp.GroupInfo[i].FaceUrl;
                        let type = resp.GroupInfo[i].Type;
                        let owner_account = resp.GroupInfo[i].Owner_Account;
                        let create_time = webim.Tool.formatTimeStamp(resp.GroupInfo[i].CreateTime);
                        let member_num = resp.GroupInfo[i].MemberNum;
                        let notification = webim.Tool.formatText2Html(resp.GroupInfo[i].Notification);
                        let introduction = webim.Tool.formatText2Html(resp.GroupInfo[i].Introduction);
                        data.push({
                            'GId': group_id,
                            'GroupId': webim.Tool.formatText2Html(group_id),
                            'Name': name,
                            'TypeZh': type_zh,
                            'Type': type,
                            'Owner_Account': owner_account,
                            'MemberNum': member_num,
                            'Notification': notification,
                            'Introduction': introduction,
                            'CreateTime': create_time,
                            'FaceUrl': FaceUrl
                        });
                    }
                }
                That.groupData = data[0];
                That.currentGroupType = data[0].Type;
                That.applyGroupId = data[0].GId;
                Client.log("搜索群号成功-start");
                Client.log(resp);
                Client.log(That.groupData);
                Client.log("搜索群号成功-end");

                
            },
            function(err) {
                alert(err.ErrorInfo);
            }
        );
    },
    
    
  }
  
}
</script>
<style lang="scss">
  @import '../../style/addGroup';
</style>

